<!DOCTYPE html>
<html> <!-- borderradius.html -->
  <head>
    <title>CSS3 Border Radius Examples</title>
    <style>
      .box {
        margin-bottom:10px;   
        font-family  :'Courier New', monospace;
        font-size    :12pt;
        text-align   :center;
        padding      :10px;
        width        :380px;
        height       :75px;
        border       :10px solid #006;
      }
      .b1 {
        -moz-border-radius   :40px;
        -webkit-border-radius:40px;
        border-radius        :40px;
      }
      .b2 {
        -moz-border-radius   :40px 40px 20px 20px;
        -webkit-border-radius:40px 40px 20px 20px;
        border-radius        :40px 40px 20px 20px;
      }
      .b3 {
        -moz-border-radius-topleft        :20px;
        -moz-border-radius-topright       :40px;
        -moz-border-radius-bottomleft     :60px;
        -moz-border-radius-bottomright    :80px;
        -webkit-border-top-left-radius    :20px;
        -webkit-border-top-right-radius   :40px;
        -webkit-border-bottom-left-radius :60px;
        -webkit-border-bottom-right-radius:80px;
        border-top-left-radius            :20px;
        border-top-right-radius           :40px;
        border-bottom-left-radius         :60px;
        border-bottom-right-radius        :80px;
      }
      .b4 {
        -moz-border-radius-topleft        :40px 20px;
        -moz-border-radius-topright       :40px 20px;
        -moz-border-radius-bottomleft     :20px 40px;
        -moz-border-radius-bottomright    :20px 40px;
        -webkit-border-top-left-radius    :40px 20px;
        -webkit-border-top-right-radius   :40px 20px;
        -webkit-border-bottom-left-radius :20px 40px;
        -webkit-border-bottom-right-radius:20px 40px;
        border-top-left-radius            :40px 20px;
        border-top-right-radius           :40px 20px;
        border-bottom-left-radius         :20px 40px;
        border-bottom-right-radius        :20px 40px;
      }
    </style>
  </head>
  <body>
    <div class='box b1'>
      border-radius:40px;
    </div>

    <div class='box b2'>
      border-radius:40px 40px 20px 20px;
    </div>

    <div class='box b3'>
      border-top-left-radius &nbsp;&nbsp;&nbsp;:20px;<br>
      border-top-right-radius &nbsp;&nbsp;:40px;<br>
      border-bottom-left-radius :60px;<br>
      border-bottom-right-radius:80px;
    </div>

    <div class='box b4'>
      border-top-left-radius &nbsp;&nbsp;&nbsp;:40px 20px;<br>
      border-top-right-radius &nbsp;&nbsp;:40px 20px;<br>
      border-bottom-left-radius :20px 40px;<br>
      border-bottom-right-radius:20px 40px;
    </div>
  </body>
</html>
